<template>
  <div class="loginbg">
    <div class="dx-card">
      <div class="left">
        <div style="height: 70%; font-size: 40px; font-weight: bold; padding: 7% 6%">
          <div style="font-family: 'Aileron'">EV-<span style="color: #e94609">O</span>MES</div>
          <div style="font-size: 25px; font-family: '思源雅黑'">
            慧都<span style="font-family: 'Aileron'">EV-OMES</span>产线管理
          </div>
          <div style="font-size: 15px; color: #828282; margin-top: 8px; font-family: 'Aileron'">
            WELCOME TO EVGET RAPID DEVELOPMENT PLATFORM
          </div>
          <div class="content">
            <img src="../assets/login/left_content.png" width="80%" />
          </div>
          <div style="text-align: center">
            <img src="../assets/login/evget_black_logo.png" width="18%" />
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right_card">
          <div style="text-align: center; padding-bottom: 40px">
            <img src="../assets/login/evget_white_logo.png" width="62%" />
          </div>
          <div style="padding: 0 0 30px 0; color: white; font-weight: bolder; font-size: 16px">
            {{ $t("function-user.user_please_login") }}
          </div>
          <div class="login_form">
            <el-form :model="loginData" :rules="loginFormRules" ref="loginForm" label-width="0px">
              <el-form-item label="" prop="username">
                <el-input
                  prefix-icon="el-icon-user"
                  v-model="loginData.username"
                  :placeholder="$t('common.please_input') + $t('function-user.user_username')"
                  @keyup.enter.native="submitForm()"
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input
                  prefix-icon="el-icon-lock"
                  v-model="loginData.password"
                  :placeholder="$t('common.please_input') + $t('function-user.user_password')"
                  type="password"
                  :show-password="true"
                  @keyup.enter.native="submitForm()"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div style="font-size: 1.6vh; color: #ccc; margin-top: 8px">{{ $t('function-user.user_forgot_admin') }}</div>
          <div style="margin-top: 30px">
            <el-button
              @click="submitForm()"
              type="primary"
              style="width: 100%; height: 60px; font-size: 20px; background-color: #5d7fff; border: none"
              >{{ $t('function-user.user_login') }}</el-button
            >
          </div>
        </div>
        <div
          style="position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); color: #ccc; font-size: 16px"
        >
          {{ $t('common.home_description') }}
        </div>
        <div
          style="position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #ccc; font-size: 16px"
        >
          www.evget.com
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";

export default {
  name: "Login",
  data() {
    return {
      loginData: {
        username: "",
        password: "",
      },
      loginFormRules: {
        username: [
          { 
            required: true,
            message: this.$t('common.please_input') + this.$t('function-user.user_username'),
            trigger: "blur"
          }
        ],
        password: [
          { 
            required: true,
            message: this.$t('common.please_input') + this.$t('function-user.user_password'),
            trigger: "blur"
          }
        ],
      },
    };
  },
  mounted() {
    sessionStorage.removeItem("currentApp");
    sessionStorage.removeItem("currentPage");
    this.$actions.setGlobalState({ userInfo: { name: "ROOT" } });
  },
  methods: {
    //回车登录
    enterSubmitForm(e) {
      if (e.event.keyCode == 13) {
        this.submitForm();
      }
    },
    //提交登录
    submitForm() {
      this.$refs.loginForm.validate((valid) => {
        if (!valid) {
          return;
        }
        let data = [];
        data.push("PC");
        data.push(this.loginData.username);
        data.push(md5(this.loginData.password));
        this.$server()
          .login(data)
          .then((response) => {
            //登录成功的时候的逻辑处理
            sessionStorage.setItem("user", JSON.stringify(response.user)); //设置user
            this.$store.commit("user/UPDATE_USER_INFO_ITEM", { key: "userInfo", value: response.user })
            sessionStorage.setItem("username", response.user.name);
            sessionStorage.setItem("authorization_token", response.token); //设置token
            this.$server().setToken(response.token);

            // 获取登录用户信息
            this.$server()
              .erdfRequest(`/server/${window.microService}/base/Resource/selectsByUser`, [], "post")
              .then((result) => {
                const menus = result.filter((f) => f.type != "3");
                // menus.unshift({
                //   icon: "iconfont icon-home",
                //   title: "首页",
                //   component: "/index",
                // });
                localStorage.setItem("navigation", JSON.stringify(menus));
                let powers = "";
                // 用户权限信息
                result.forEach((item) => {
                  if (item.code) {
                    powers += item.code + ",";
                  } else {
                    powers += item.title + ",";
                  }
                });
                this.$server().items(powers ? powers : null);
                this.toHome();
              })
              .catch((err) => {
                if (err.data.msg) {
                  this.$message.error(err.data.msg);
                } else if (err.msg) {
                  this.$message.error(err.msg);
                } else {
                  this.$message.error(this.$t('function-user.user_get_permission_fail'));
                }
              });
            this.$server()
              .query(window.microService, "Resource", null, "sort")
              .then((result) => {
                const menus = result.list.filter((f) => f.type != "按钮");
                sessionStorage.setItem("navigation", JSON.stringify(menus));
              });
            //查询过滤动态表单列表
            this.$server()
              .query("business-manufacture", "Form", null, null, null, true)
              .then((res) => {
                sessionStorage.setItem("dtForm", JSON.stringify(res.list));
              });
          })
          .catch((response) => {
            this.$message.error(response.data.message);
            console.log(response);
          });
      });
    },

    // 跳转首页
    toHome() {
      this.$store.commit("permission/UPDATE_CURRENT_MODULE_NAME", "home");
      this.$store.commit("permission/UPDATE_CURRENT_PAGE", process.env.VUE_APP_DEFAULT_APP);
      this.$router.push(process.env.VUE_APP_DEFAULT_APP);
    },
  },
};
</script>
<style lang="scss" scoped>
.loginbg {
  width: 100%;
  height: 100%;
  min-height: 768px;
  min-width: 1366px;
  position: relative;
  background: url("../assets/login/background.png") center center no-repeat;
  background-size: cover;
}
.dx-card {
  width: 1632px;
  height: 760px;
  display: flex;
  border-radius: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 0;
  transform: translate(-50%, -50%);
  box-shadow: -13px 13px 18px rgba(0, 0, 0, 0.4);
}
.left {
  width: 63%;
  height: 100%;
  background-color: #efefef;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
.right {
  width: 37%;
  height: 100%;
  background-color: #14279b;
  position: relative;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}
.logo_p {
  background: url("../assets/login/logo_p.png") no-repeat;
  background-size: contain;
  width: 4%;
  height: 9%;
  position: absolute;
  top: 3%;
  left: 2%;
}
.logo_t {
  background: url("../assets/login/logo_t.png") no-repeat;
  background-size: contain;
  width: 11.6%;
  height: 3.9%;
  position: absolute;
  top: 6%;
  left: 7%;
}
.content {
  background-size: contain;
  text-align: center;
  margin: 20px auto 10px;
}
.head {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #ffffff;
  margin: 0 auto;
  margin-bottom: 32px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.right_card {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66%;
  height: 60%;
}
.login_form {
  ::v-deep .el-input__inner {
    height: 60px;
    line-height: 60px;
    padding: 7px 0 8px 42px;
    font-size: 14px;
  }
  ::v-deep .el-input__prefix {
    font-size: 28px;

    .el-input__icon {
      width: 30px;
    }
  }
}
</style>
